<template>
  <div>
    <el-input class="search" placeholder="请输入内容" prefix-icon="el-icon-search" v-model.trim="searchText">
    </el-input>
    <el-button class="searchBtn" type="primary" @click="searchUser">搜索</el-button>
    <el-button class="addUser" type="primary" @click="dialogFormVisible=true">新增分类</el-button>
    <!-- 表格 -->
    <el-table class="userTable" style="width: 100%" :data="goodList"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id">
      <el-table-column label="分类名称" prop="name" align="left">
      </el-table-column>
      <el-table-column label="分类描述" prop="desc" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="bottom-start">
            <div slot="content" style="width: 400px">
              {{ scope.row.desc }}
            </div>
            <span>
              {{ scope.row.desc ?
              (scope.row.desc.length > 15? scope.row.desc.substr(0, 15) + '...' : scope.row.desc)
              :
              '暂无描述' }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="上架时间" prop="createAt" align="center">
        <template slot-scope="scope">
          {{ dayjs(scope.row.createAt).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="changeCate(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteCate(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination layout="prev, pager, next,jumper,total,slot,sizes" small background :total="total"
      @current-change="pageChange" @size-change="sizeChange">
    </el-pagination>
    <!-- 新增 -->
    <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
      <add-cate :closeDia="handleClose" @goAdd="addCate"></add-cate>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改分类" :visible.sync="dialogVisible">
      <updata-cate :closeDia="handleClose" :changeList="changeList" @goChange="cateChange"></updata-cate>
    </el-dialog>
  </div>
</template>

<script>
import { goodCate, deleteCate, cateAdd, cateChange } from '@/api'
import addCate from './component/addCate.vue'
import updataCate from './component/updataCate.vue'
import dayjs from 'dayjs'
export default {
  name: 'GoodList',
  data () {
    return {
      dialogVisible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      searchText: '',
      goodList: [],
      drawer: false,
      direction: 'rtl',
      changeList: null,
      dialogFormVisible: false
    }
  },
  methods: {
    // 获取全部商品分类
    goodCate () {
      goodCate().then(res => {
        this.total = res.data.total
        this.goodList = res.data.list
        console.log(this.goodList)
      })
    },
    //  生成时间
    dayjs,
    // 搜索角色
    searchUser () {
      if (this.searchText !== '') {
        this.goodCate({
          name: this.searchText
        })
      }
      this.searchText = ''
    },
    // 页码改变了
    pageChange (currentPage) {
      this.page = currentPage
      // 发送请求返回显示的多少数量的
      this.goodCate({
        page: currentPage,
        pageSize: this.pageSize
      })
    },
    // 每一的数量发生改变
    sizeChange (size) {
      this.pageSize = size
      this.goodCate({
        page: this.page,
        pageSize: size
      })
    },
    // 新增分类的表单
    addCate (data) {
      cateAdd(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    // 删除当前
    deleteCate (GoodId) {
      // 发送请求
      console.log(GoodId)
      this.$confirm('是否删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        deleteCate(GoodId).then(() => {
          this.goodCate({
            page: this.page,
            pageSize: this.pageSize
          })
        })
      })
    },
    // 关闭dia
    handleClose () {
      this.dialogVisible = false
      this.dialogFormVisible = false
    },
    // 打开修改弹窗，并传参数
    changeCate (currentCate) {
      this.changeList = currentCate
      this.dialogVisible = true
    },
    // 提交改变商品分类的表单
    cateChange (data) {
      cateChange(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    }
  },
  created () {
    this.goodCate()
  },
  components: {
    addCate,
    updataCate
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.userTable {
  height: 500px;
  overflow: auto;
  margin-bottom: 10px;
}

.addUser {
  float: right;
}
</style>
